<template>
    <div class="home">
      <div class="header">
        <div class="header_left">
          <div class="avatar" @click="goCenter" >
            <img :src="avatar" v-if="setting.cloud" />
          </div>
        </div>
        <div class="header_center">
          <van-search
            class="radius-min"
            @focus="$router.push({ name: 'search' })"
            placeholder="搜索艺术品，寻找属于您的藏品"
          >
          </van-search>
        </div>
        <van-badge :content="user.user_message_count" max="99" min="0">
          <div class="header_right" @click="$router.push({ name: 'notice' })">
            <img src="../assets/image/home/notice.png" alt="" />
          </div>
        </van-badge>
      </div>

      <div>
        <div class="swipe">
          <all-skeleton
            :show="setting.banner.length > 0 ? true : false"
            name="home_slider"
          >
            <van-swipe :autoplay="3000">
              <van-swipe-item v-for="item in setting.banner" :key="item.id">
                <img :src="item.image" />
              </van-swipe-item>
            </van-swipe>
          </all-skeleton>
        </div>
      </div>
      <goods-list/>
    </div>
</template>

<script setup>
import { computed } from "vue";
import commonStore from "../store/common";
import { useRouter } from "vue-router";
const router = useRouter();

// 获取setting数据
const common = commonStore();
let setting = computed(() => common.setting);
const user = computed(() => common.userInfo);
console.log("首页userinfo:",user)

// 首页头像部分
const avatar = computed(() => {
  if (common.token) {
    return setting.value.cloud.url + user.value.avatar
    
  } 
  return setting.value.cloud.url + setting.value.site_logo;
});

const goCenter = () => {
  if (common.token) {
    router.push({ name: "my" });
  } else {
    router.push({ name: "login" });
  }
};
</script>

<style lang="scss" scope>
.van-tab--active {
  font-weight: bold;
}
</style>